<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '车位信息',
  },
}
</route>

<template>
  <view class="parking-list">
    <view v-for="item in list" :key="item.id" class="parking-card" @tap="emitClick(item)">
      <wd-swipe-action>
        <template #right>
          <view class="action">
            <view class="button" style="background: #7bed9f" @click="handleParkingCar(item)">
              停车
            </view>
          </view>
        </template>

        <view class="parking-header">
          <text class="parking-title">车位 {{ item.code }}</text>
          <wd-tag :type="item.is_disable === 1 ? 'primary' : 'success'">
            {{ item.is_disable === 1 ? '空闲' : '已占用' }}
          </wd-tag>
        </view>
        <view class="parking-desc">第{{ item.floor }}层{{ item.zone }}区</view>
      </wd-swipe-action>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps<{ list: any[] }>()
const emit = defineEmits(['itemClick'])
const emitClick = (item: any) => {
  emit('itemClick', item)
}

const handleParkingCar = (item) => {
  uni.navigateTo({
    url: `/pages/parking-car/parking-car?parkingId=${item.id}`,
  })
}
</script>

<style scoped lang="scss">
.parking-list {
  margin-top: 10rpx;
}
.parking-card {
  padding: 18rpx 20rpx;
  margin-bottom: 16rpx;
  background: #f7f8fa;
  border-radius: 8rpx;
}
.parking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.parking-title {
  font-size: 28rpx;
  font-weight: 500;
}
.parking-desc,
.parking-distance {
  margin-bottom: 2rpx;
  font-size: 24rpx;
  color: #888;
}

.action {
  height: 100%;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  padding: 0 11px;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
}
</style>
